import React, { useEffect, useImperativeHandle, useState } from "react";
import { Modal, Table } from "antd";
import { useTranslation } from "react-i18next";
import DarkTip from "../../../../assets/images/dapp/dark_tip.svg";
import WaitingIcon from "../../../../assets/images/dapp/waitingIcon.svg";
import BuyLodaingIcon from "../../../../assets/images/buy_loading.svg";
import DarkArrowIcon from "../../../../assets/images/dapp/dark_arrow.svg";
import LightArrowIcon from "../../../../assets/images/dapp/light_arrow.svg";
import CloseIcon from '../../../../assets/images/close.svg'
export const BuyDetailRecords = React.forwardRef(({}, ref) => {
  const { t } = useTranslation();

  const [openStatus, setOpenStatus] = useState(false);
  const [dataSource, setDataSource] = useState([
    {
      a: "BTC",
      b: 1897.041999001,
      c: 10,
      d: 2099.123456789,
      e: null,
      f: null,
      g: 1,
      h: null,
    },
    {
      a: "BTC",
      b: 1897.041999001,
      c: 10,
      d: 2099.123456789,
      e: null,
      f: null,
      g: 1,
      h: null,
    },
    {
      a: "BTC",
      b: 1897.041999001,
      c: 10,
      d: 2099.123456789,
      e: null,
      f: null,
      g: 1,
      h: null,
    },
    {
      a: "BTC",
      b: 1897.041999001,
      c: 10,
      d: 2099.123456789,
      e: null,
      f: null,
      g: 1,
      h: null,
    },
    {
      a: "BTC",
      b: 1897.041999001,
      c: 10,
      d: 2099.123456789,
      e: null,
      f: null,
      g: 1,
      h: null,
    },
    {
      a: "BTC",
      b: 1897.041999001,
      c: 10,
      d: 2099.123456789,
      e: null,
      f: null,
      g: 1,
      h: null,
    },
    {
      a: "BTC",
      b: 1897.041999001,
      c: 10,
      d: 2099.123456789,
      e: null,
      f: null,
      g: 1,
      h: null,
    },
    {
      a: "BTC",
      b: 1897.041999001,
      c: 10,
      d: 2099.123456789,
      e: null,
      f: null,
      g: 1,
      h: null,
    },
    {
      a: "BTC",
      b: 1897.041999001,
      c: 10,
      d: 2099.123456789,
      e: null,
      f: null,
      g: 1,
      h: null,
    },
    {
      a: "BTC",
      b: 1897.041999001,
      c: 10,
      d: 2099.123456789,
      e: null,
      f: null,
      g: 1,
      h: null,
    },
    {
      a: "BTC",
      b: 1897.041999001,
      c: 10,
      d: 2099.123456789,
      e: null,
      f: null,
      g: 1,
      h: null,
    },
    {
      a: "BTC",
      b: 1897.041999001,
      c: 10,
      d: 2099.123456789,
      e: null,
      f: null,
      g: 1,
      h: null,
    },
    {
      a: "BTC",
      b: 1897.041999001,
      c: 10,
      d: 2099.123456789,
      e: null,
      f: null,
      g: 1,
      h: null,
    },
    {
      a: "BTC",
      b: 1897.041999001,
      c: 10,
      d: 2099.123456789,
      e: null,
      f: null,
      g: 1,
      h: null,
    },
    {
      a: "BTC",
      b: 1897.041999001,
      c: 10,
      d: 2099.123456789,
      e: null,
      f: null,
      g: 1,
      h: null,
    },
    {
      a: "BTC",
      b: 1897.041999001,
      c: 10,
      d: 2099.123456789,
      e: null,
      f: null,
      g: 1,
      h: null,
    },
    {
      a: "BTC",
      b: 1897.041999001,
      c: 10,
      d: 2099.123456789,
      e: null,
      f: null,
      g: 1,
      h: null,
    },
  ]);

  useImperativeHandle(ref, () => ({
    open: () => {
      return handleOpen();
    },
    colse: () => {
      return handleClickClose();
    },
  }));

  const handleOpen = () => {
    setOpenStatus(true);
  };

  const handleClickClose = () => {
    setOpenStatus(false);
  };

  const columns = [
    {
      title: "#",
      dataIndex: "index",
      key: "index",
      render: (text, record, index) => index + 1,
    },
    { title: "Token", dataIndex: "a", key: "a" },
    { title: t("dappDeal.currentPriceLabel"), dataIndex: "b", key: "b" },
    { title: t("dappDeal.currentWeight"), dataIndex: "c", key: "c" },
    { title: t("dappDeal.buyAmount"), dataIndex: "d", key: "d" },
    { title: t("dappDeal.shouldBuyQuantity"), dataIndex: "e", key: "e" },
    { title: t("dappDeal.actualBuyQuantity"), dataIndex: "f", key: "f" },
    { title: t("dappDeal.slippage"), dataIndex: "g", key: "g" },
    { title: t("dappDeal.buyExecutionStatus"), dataIndex: "h", key: "h" },
  ];
  return (
    <Modal
      width={1160}
      className="buy-detail-records-modal"
      open={openStatus}
      askClosable={false}
      footer={null}
      title={null}
      closeIcon={null}
      style={{
        top: 84,
      }}
    >
      <div className="buy-detail-records-comp">
        <div className="title-row">
          <div className="title-text">{t("dappDeal.tabSubscribe")}</div>
          <img src={CloseIcon}
            className="close-icon"
            onClick={() => handleClickClose()}
          />
        </div>
        <div className="header-row">
          <div className="left">
            <div className="left-item">
              <div className="item-label">{t("dappDeal.buyUSDTNum")}:</div>
              <div className="item-value"></div>
            </div>
            <div className="left-item">
              <div className="item-label">{t("dappDeal.buyUSDTPrice")}:</div>
              <div className="item-value"></div>
            </div>
            <div className="left-item">
              <div className="item-label">{t("dappDeal.commission")}:</div>
              <div className="item-value"></div>
            </div>
            <div className="left-item">
              <div className="item-label">{t("dappDeal.absenteeismFees")}:</div>
              <div className="item-value"></div>
            </div>
          </div>
          <div className="right">
            <div className="right-item">
              <div className="item-label">
                {t("dappDeal.transactionStatus")}:
              </div>
              <div className="item-value"></div>
            </div>
          </div>
        </div>
        <div className="body-content">
          <div className="content-header">
            <div className="header-title">{t("dappDeal.dexBuyTask")}</div>
            <img src={DarkTip} className="tips-icon"></img>
          </div>
          <div className="scroll-box">
            <Table columns={columns} dataSource={dataSource} pagination={false}>
              {" "}
            </Table>
          </div>
        </div>
        <div className="tips-row">
          <div className="left">{t("dappDeal.currentBuySlippage")}: --</div>
          <div className="right">{t("dappDeal.buyTips")}</div>
        </div>
        <div className="footer-row">
          <div className="left">
            <div className="buy-btn">
              <img src={BuyLodaingIcon} className="buy-loading-icon"></img>
              {t("dappDeal.tabSubscribe")}
            </div>

            <div className="buy-status-box">
              <img src={WaitingIcon}></img>
              <div className="text">{t("dappIndexRegulation.teamLabel")}</div>
              <div className="num">5</div>
            </div>
          </div>

          <div className="right">
            <div className="right-text">{t("dappDeal.continueBuy")}</div>
            <img src={DarkArrowIcon}  className="right-arrow"/> <img src={LightArrowIcon}  className="light-arrow"/>
          </div>
        </div>
      </div>
    </Modal>
  );
});
